<template>
<div class="cmt-container">
  <h4>发表评论</h4>
  <hr>
  <textarea name="" id=""  placeholder="请输入要BB的内容（做多吐槽120字）" v-model="msg"></textarea>
 <button data-v-e10688ce="" class="mint-button mint-button--primary mint-button--large" @click="addcomment"><!----><label class="mint-button-text">发表评论</label></button>
  
  <div data-v-e10688ce="" class="cmt-list">
      <div data-v-e10688ce="" class="cmt-item" v-for="(item,i) in datalist" :key="i">
          <div data-v-e10688ce="" class="cmt-title">
        第{{i+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | fordata}}
      </div> <div data-v-e10688ce="" class="cmt-body">
        {{item.content}}
      </div></div>
      
      </div>

      <button data-v-e10688ce="" class="mint-button mint-button--danger mint-button--large is-plain" @click="Getmore"><!----><label class="mint-button-text">加载更多</label></button>
  </div>
</template>
<script>
//从MintUI中导出需要的mint-ui的弹框
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      pageindex: 1,
      datalist: [],
      msg: ""
    };
  },
  created() {
    this.getinfo();
  },
  methods: {
    async getinfo() {
      const { data } = await this.$http.get(
        "/api/getcomments/" + this.id + "?pageindex=" + this.pageindex
      );
      if (data.status === 0) {
        console.log(data.message);
        this.datalist = this.datalist.concat(data.message);
      }
    },
    Getmore() {
      this.pageindex++;
      this.getinfo();
    },
    async addcomment() {
      if (this.msg.trim().length <= 0) return Toast("请填写内容");
      const { data } = await this.$http.post("/api/postcomment/" + this.id, {
        content: this.msg.trim()
      });
      if (data.status === 0)
        //console.log(data)
        this.datalist.unshift({
          user_name: "匿名用户",
          add_time: new Date(),
          content: this.msg.trim()
        });
        this.msg=''
    }
  },
  props: ["id"]
};
</script>
<style lang="scss">
.cmt-container {
  font-size: 14px;
  textarea {
    font-size: 14px;
  }
}
.cmt-container .cmt-list[data-v-e10688ce] {
  margin: 5px 0;
}
.cmt-container .cmt-list .cmt-item .cmt-title[data-v-e10688ce] {
  line-height: 30px;
  background-color: #ccc;
}
.cmt-container .cmt-list .cmt-item .cmt-body[data-v-e10688ce] {
  line-height: 35px;
  text-indent: 2em;
}
</style>

